<%-- 
    Document   : department
    Created on : 2018-11-1, 12:28:06
    Author     : yaohk
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>部门管理</title>
        <%@include file="/WEB-INF/jspf/layui/top_layui.jspf" %>
        <style type="text/css">
            iframe{
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0
            }
            .layui-treeSelect .ztree  *{
                font-size: 12px !important;
            }
            .layui-treeSelect .ztree  li span{
                top: 3px !important;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            $("body").mask({
                maskMsg: '<div class="loading_text"><img src="${contextPath}/resources/images/loading_2.gif"/><span>正在初始化，请稍后...</span></div>',
                opacity: 1
            });
            $(function () {
                $("body").mask('hide');
            });
        </script>
        <div style="margin: 10px 20px 0px;">
            <shiro:hasPermission name="dept:add:*">
                <button class="layui-btn layui-btn-sm" id="add_dept"> <i class="layui-icon">&#xe608;</i> 添加</button>
            </shiro:hasPermission>
            <button class="layui-btn layui-btn-sm" id="btn_preview_panel" style="float: right;"> <i class="layui-icon">&#xe857;</i> 预览面板</button>
        </div>

        <div  id="treeDepr">
            <table id="table1" class="layui-table" lay-filter="table1"></table>
        </div>

        <form class="layui-form" id="dept" lay-filter="dept" style="display: none; margin: 30px 40px 0px 0px; ">
            <input type="hidden" name="id" id="dept_id"/>
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" placeholder="请输入部门名称" autocomplete="off" lay-verify="required" class="layui-input" style="width: 200px;">
                </div>
            </div>
            <div class="layui-form-item" style="width: 310px">
                <label class="layui-form-label">上级部门</label>
                <div class="layui-input-block">
                    <input type="text" name="pId" id="pId" lay-filter="treeSelect" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门描述</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="remark" name="remark" style="width:200px;height: 150px;"></textarea>
                </div>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" lay-submit lay_filter="*" id="add" style="display: none;">添加</button>
        </form>

        <script type="text/html" id="oper-col">
            <shiro:hasPermission name="dept:detail:*">
                <a href="#" lay-event="showDetails" title="查看详情"><i class="layui-icon layui-icon-table"></i></a>&nbsp;&nbsp;&nbsp;
                </shiro:hasPermission>
                <shiro:hasPermission name="dept:add:*">
                <a class="" lay-event="add" title="添加部门"><i class="layui-icon layui-icon-add-1"></i></a>&nbsp;&nbsp;&nbsp;
                </shiro:hasPermission>
                <shiro:hasPermission name="dept:modify:*">
                <a class="" lay-event="mod" title="修改部门"><i class="layui-icon layui-icon-edit"></i></a>&nbsp;&nbsp;&nbsp;
                </shiro:hasPermission>
                <shiro:hasPermission name="dept:delete:*">
                <a class="" lay-event="del" title1="删除部门"><i class="layui-icon layui-icon-delete"></i></a>
                </shiro:hasPermission>
        </script>
        <script type="text/javascript">
            layui.config({
                base: '${contextPath}/layui/'
            }).extend({
                treeSelect: 'treeSelect',
                treetable: 'treetable'
            }).use(['treeSelect', 'layer', 'form', 'table', 'treetable'], function () {
                var treeSelect = layui.treeSelect;
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var treetable = layui.treetable;
                // 渲染表格
                var renderTable = function () {
                    layer.load(2);
                    treetable.render({
                        elem: '#table1',
                        treeColIndex: 2, //树形图标显示在第几列
                        treeSpid: 0, //最上级的父级id
                        treeIdName: 'id', // 	id字段的名称
                        treePidName: 'pid', //pid字段的名称
                        treeDefaultClose: false, //是否默认折叠
                        treeLinkage: false, //父级展开时是否自动展开所有子级
//                        size: 'sm',
                        url: '${contextPath}/dept/list/layui.json',
                        page: false,
                        cols: [[
                                {type: 'numbers', fixed: 'left'},
                                {templet: '#oper-col', title: '操作', align: 'center', width: 150},
                                {field: 'name', title: '部门名称'},
                                {field: 'remark', align: 'center', title: '备注'}
                            ]],
                        done: function () {
                            layer.closeAll('loading');
                        }
                    });
                };
                renderTable();
                //监听操作栏点击事件           
                table.on('tool(table1)', function (obj) {
                    if (obj.event === 'showDetails') {//查看部门详情
                        showDetails(obj.data);
                    } else if (obj.event === 'add') {//添加部门
                        $.ajax({
                            url: "${contextPath}/dept/add/ui.json",
                            success: function () {
                                operation(obj.data, "add");
                            }
                        });
                    } else if (obj.event === "mod") {//修改部门
                        $.ajax({
                            url: "${contextPath}/dept/modify/ui.json",
                            success: function () {
                                if (obj.data.id === 1) {
                                    layer.alert('总经理节点不可编辑！', {title: '系统提示', icon: 4});
                                } else {
                                    operation(obj.data, "mod");
                                }
                            }
                        });
                    } else if (obj.event === "del") {//删除部门
                        del(obj.data);
                    }
                });
                //监听行双击事件
                table.on('rowDouble(table1)', function (obj) {
                    showDetails(obj.data);
                });
                function select(name) {
                    //                树形下拉选择框
                    treeSelect.render({
                        elem: '#pId',
                        data: '${contextPath}/dept/list/deptTreeLayui.json',
                        type: 'get',
                        placeholder: '请选择部门名称',
                        //                    search: false, // 是否开启搜索功能：true/false，默认false
                        style: 'height:145px',
                        // 点击回调
                        click: function (data) {
                            $('#pId').attr('value', data.current.id);
                        },
                        success: function (data) {
                            //                刷新树结构
                            treeSelect.refresh('treeSelect');
                            $('.layui-unselect').attr('value', name); //设置其默认值
                        }
                    });
                }
                select();
//                查看详情
                function showDetails(data) {
                    $.ajax({
                        url: "${contextPath}/dept/detail/ui.json",
                        success: function () {
//                    赋值并设为禁用状态
                            $('#name').attr('value', data.name).attr('disabled', 'disabled');
                            $('.layui-unselect').attr('value', data.parentDeptName).attr('disabled', 'disabled');
                            $('#remark').attr('value', data.remark).attr('disabled', 'disabled');
                            layer.open({
                                title: '查看详情',
                                type: 1,
                                content: $('#dept'),
                                btn: '取消'
                            });
                        }
                    });
                }
                //删除部门
                function del(obj) {
                    $.ajax({
                        url: "${contextPath}/dept/delete/ui.json",
                        success: function () {
                            if (obj.id === 1) {
                                layer.alert('总经理节点不可删除！', {title: '系统提示', icon: 4});
                            } else {
                                layer.confirm('您确定要删除部门：' + obj.name + '吗？', {icon: 2}, function (index) {
                                    $.ajax({
                                        url: '${contextPath}/dept/delete.json?deptId=' + obj.id,
                                        success: function (data) {
                                            if (data.success) {
                                                layer.close(index);
                                                layer.alert('删除成功！', {title: '系统提示', icon: 6});
                                                renderTable(); //刷新表格
                                            } else {
                                                layer.close(layer.index);
                                                layer.close(index);
                                                layer.alert('无法删除部门' + obj.name + ' ' + data.errMsg, {title: '系统提示', icon: 5});
                                            }
                                        }
                                    });
                                });
                            }
                        }
                    });
                }
                $('#add_dept').click(function () {
                    $.ajax({
                        url: "${contextPath}/dept/add/ui.json",
                        success: function () {
                            operation();
                        }
                    });
                }
                );
                var verify = false;
                form.verify({
                    required: function (value) {
                        if (!/[^\s]+/.test(value)) {
                            verify = false;
                            return '必填项不能为空';
                        } else {
                            verify = true;
                        }
                    }
                });
                function operation(obj, data) {
                    $('#pId').siblings().remove(); //删除部门下拉选择框
                    $('#name').removeAttr("disabled"); //移除disabled属性
                    $('.layui-unselect').removeAttr("disabled");
                    $('#remark').removeAttr("disabled");
                    var url = "${contextPath}/dept/add/action.json";
                    var string = '添加';
                    if (data === "add") {
                        select(obj.name); //重载treeSelect
                        //设置pId的值 清空其他属性的值
                        form.val('dept', {//表单赋值
                            id: '',
                            name: '',
                            pId: obj.id, //新增子部门的pId为父部门的id
                            remark: ''
                        });
//                        $('.layui-unselect').attr('value', obj.name); //设置上级部门的默认值
                    } else if (data === "mod") {
                        select(obj.parentDeptName);
                        url = "${contextPath}/dept/modify/action.json";
                        string = '修改';
                        form.val('dept', {//表单赋值
                            name: obj.name,
                            pId: obj.pid,
                            id: obj.id,
                            remark: obj.remark
                        });
//                        $('.layui-unselect').attr('value', obj.parentDeptName);
                    } else {
                        select();
                        form.val('dept', {//表单赋值
                            name: '',
                            pId: '',
                            id: '',
                            remark: ''
                        });
//                        $('.layui-unselect').attr('value', '');
                    }
                    layer.open({
                        title: string + '部门',
                        type: 1,
                        content: $('#dept'),
//                        area: '350px',
                        btn: [string, '取消'],
                        yes: function () {
                            $('#add').click(); //触发表单的验证
                            if (verify) {
                                var upOptions = {
                                    url: url,
                                    type: 'post',
                                    beforeSumbit: function () {
                                    },
                                    success: function (data) {
                                        if (data.success) {
                                            layer.closeAll();
                                            layer.msg(string + '成功！', {time: 1500});
                                            renderTable();
                                        } else {
                                            layer.alert(string + '失败！', {title: '系统提示', icon: 5});
                                        }
                                    }
                                };
                                $('#dept').ajaxSubmit(upOptions);
                            }
                        }
                    });
                }
                var preview = '<div style="position: fixed;top: 50px;left: 10px;right: 0;bottom: 0;" id="preview_panel">' +
                        '<iframe src="${contextPath}/dept/list/ui/chart" frameborder="0" scrolling="auto" width="100%" id="struture_chart"/></div>';
                //预览面板
                $('#preview_panel').hide();
                $('#btn_preview_panel').toggle(function () {
                    $("#treeDepr").hide();
                    $('body').append(preview);
                }, function () {
                    $("#treeDepr").show();
                    $('#preview_panel').remove();
                });
            });
            $(document).ajaxError(new jQueryAjaxErrorHandler());
        </script>
    </body>
</html>
